<!--
 * @Description: mockExam - 模拟&机考做题页
 * @Author: your name
 * @Date: 2024-02-23
 * @LastEditTime: 2024-02-23
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="mockExam heart_w" :class="[{ have_case: change_class }]">
      <div class="test">
        <div class="header">
          <p>Question: {{ p_id + 1 }}</p>
          <div class="center" v-if="model == 1">
            <span>{{ timing }}</span>
          </div>
          <div class="right" v-if="model == 1">
            <el-button plain @click="finish_show = true">
              Finish Test
            </el-button>
          </div>
        </div>
        <div class="centertitle">
          <p>Test: CFA Online Tutorial</p>
        </div>

        <div class="main">
          <!-- <div v-show="!arrlen">暂时没有题目</div> -->
          <div class="main_left">
            <div class="btns_cont">
              <div
                class="inner_btnbox"
                v-for="(item, index) in itemobj"
                :key="index"
              >
                <el-button
                  size="mini"
                  :class="[
                    { test_btn: true },
                    { answered: item.user_answer },
                    { active: item.cid == p_id }
                  ]"
                  @click="tabs(item, index)"
                >
                  {{ index + 1 }}
                  <i
                    :class="[{ 'el-icon-arrow-up': true }, { up_t: true }]"
                    v-if="item.is_flag"
                  >
                  </i>
                </el-button>
                <div class="inner_btns" v-if="have_case">
                  <el-button
                    size="mini"
                    v-for="(it, i) in item.list"
                    :key="i"
                    @click="inner_tab(it, i)"
                    :class="[{ active: it.cid == p_id }]"
                  >
                    {{ i + 1 }}.{{ index + 1 }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <div class="rightbor">
            <div class="main_right">
              <div class="ques_list">
                <div class="ques_title" id="qstitle">
                  <div class="htbox" id="ques_text">v-html="item.case"</div>
                </div>
                55555 {{ topicarrobj.position }} -- {{ p_id }}
                <!-- 单选题 -->1
                <div class="options" v-if="!false">
                  <label
                    for=""
                    v-for="(item_set, index) in 3"
                    :key="index"
                    class="option_item"
                    @click="select_topic(item_set, index)"
                  >
                    <span>{{ letterarr[index] }}</span>
                    <div
                      class="option_contain"
                      :class="{ choosed: set_val == index }"
                    >
                      <div class="option_contain_main">name123</div>
                    </div>
                  </label>
                </div>

                <!-- 文本题 -->
                <div class="editor_box" v-if="false">
                  <quill-editor
                    v-model="user_answer"
                    @change="editor_change()"
                    class="editor"
                    ref="myTextEditor"
                    :options="editorOption"
                  >
                  </quill-editor>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="footer">
          <div class="left">
            <el-button
              type="success"
              size="medium"
              @click="correct_err_show = true"
            >
              <img src="@/assets/images/setting.png" alt="" />
            </el-button>
            <el-button
              type="success"
              size="medium"
              @click="addNote_show = true"
            >
              <img src="@/assets/images/menu.png" alt="" />
            </el-button>
            <el-button type="success" size="medium" @click="doubt">
              <img src="@/assets/images/ques.png" alt="" />
            </el-button>
          </div>

          <div class="right_t">
            <el-button
              type="success"
              size="medium"
              icon="el-icon-arrow-left"
              @click="pageback"
            >
              Back
            </el-button>
            <el-button type="success" size="medium" @click="nextpage">
              Next
              <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- case-html -->
    <div class="case_box" :class="{ act: zoom }" v-if="zoom_show">
      <div class="top" :class="{ case_top: zoom }">
        <h5>Case Scenario</h5>
        <img src="@/assets/images/fold.png" alt="折叠-展开" @click="zoom_out" />
      </div>
      <div class="main_case_box">
        <div class="inner" v-html="case_info"></div>
      </div>
    </div>

    <!-- finish test -->
    <transition name="leftToright">
      <div class="common_dialog finishTest" v-if="finish_show">
        <div class="inner">
          <div class="header">
            <p>Confirm Finish</p>
          </div>
          <div class="main_text">
            <img src="@/assets/images/qm.png" alt="" />
            <p>Are you sure you would like to finish the test?</p>
          </div>
          <div class="btns">
            <button @click="submitTest">
              <img src="@/assets/images/sure.png" alt="" />
              <p>Finish</p>
            </button>
            <button @click="finish_show = false">
              <img src="@/assets/images/error_exit.png" alt="" />
              <p>Cancel</p>
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { get_topic } from '@/api/CFApractice.js'
export default {
  name: 'cfa_content',
  data() {
    return {
      analysis:
        '<p>A&nbsp;</p><p>SSE = 4,320, SST = 9,105. RSS = 9,105 - 4,320 = 4,785. n = 65, k = 4.&nbsp;</p><p>R <sup>2</sup> = 4,785 / 9,105 = 0.53.&nbsp;</p><p><img src="http://www.rongyuejiaoyu.com/ueditor/php/upload/image/20231116/1700120405568409.png" title="1700120405568409.png" alt="image.png"/></p>',
      user_answer: '',
      editorOption: {
        placeholder: '请输入...',
        readyOnly: false, //是否只读
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote', 'code-block'], // 引用  代码块
            ['image', 'link'], // 图片 链接
            [{ size: ['small', false, 'large', 'huge'] }] // 字体大小
          ]
        }
      },
      finish_show: false,
      test_case: [],
      p_id: 0,
      case_info: {},
      set_val: {},
      letterarr: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
      model: '', // 1 做题模式 0背题模式
      tid: 0, //当前题目的tid
      answer: {},
      content: '',
      wd_show: false,
      correct_err_show: false,
      addNote_show: false,
      have_case: false,
      zoom: false, // 控制case题显示位置 改
      zoom_show: false, // 控制case题显示
      change_class: false, // 控制题目显示位置
      seconds: 0,
      testTime: 0,
      timing: '00:00:00',
      Init: null,
      topicarr: [], // 请求返回的题目重组数组
      casearr: [], // 请求返回的case 题目 暂存数组
      textarr: [], // 请求返回的文本题暂存数组 text
      testarr: [], // 请求返回的单选题暂存数组list
      itemobj: [
        {
          cid: 103,
          option: 'Belgium',
          have_case: true,
          is_flag: true,
          list: [
            {
              cid: 101,
              option: 'Estonia'
            },
            {
              cid: 102,
              option: 'Ukraine'
            },
            {
              cid: 107,
              option: 'Ukraine'
            }
          ]
        },
        {
          cid: 106,
          have_case: false,
          is_flag: false,
          option: 'Estonia'
        },
        {
          cid: 108,
          have_case: false,
          is_flag: false,
          option: 'Ukraine'
        },
        {
          have_case: false,
          is_flag: false,
          cid: 117,
          option: 'Ukraine'
        }
      ],
      topicarrobj: {
        list: [
          {
            tid: 72615,
            cid: 10606,
            qst_type: 1,
            t_type: 1,
            is_case: 0,
            id: 72358,
            title:
              '<p>The adjusted R<sup>2</sup> of the full model is closest to:</p>',
            answer: 1,
            is_multi: '0',
            level: '1',
            op4: '',
            analysis:
              '<p>A&nbsp;</p><p>SSE = 4,320, SST = 9,105. RSS = 9,105 - 4,320 = 4,785. n = 65, k = 4.&nbsp;</p><p>R <sup>2</sup> = 4,785 / 9,105 = 0.53.&nbsp;</p><p><img src="http://www.rongyuejiaoyu.com/ueditor/php/upload/image/20231116/1700120405568409.png" title="1700120405568409.png" alt="image.png"/></p>',
            caseid: 0,
            vod_analysis: '',
            ms_analysis: '',
            sug_level: 0,
            thinking: '',
            is_true: -1,
            is_collection: false,
            caseinfo: null,
            op: ['0.50.', '0.53.', '0.67.'],
            user_op_: ['0.50.', '0.53.', '0.67.'],
            options: ['0.50.', '0.53.', '0.67.'],
            answerAnalize: false,
            lookanalysisString: '查看解析',
            chooseAnswerNums: -1,
            isChoose: false,
            islookAnaly: false,
            one: 1
          },
          {
            tid: 72616,
            cid: 10606,
            qst_type: 1,
            t_type: 1,
            is_case: 0,
            id: 72359,
            title:
              '<p>Which model is most likely to have the best goodness of fit?</p>',
            answer: 1,
            is_multi: '0',
            level: '1',
            op4: '',
            analysis:
              '<p>A</p><p>Lower values of the Bayesian information criteria (BIC) indicate better goodness of fit.&nbsp;</p><p><img src="http://www.rongyuejiaoyu.com/ueditor/php/upload/image/20231116/1700120464964514.png" title="1700120464964514.png" alt="image.png"/></p><p>The unrestricted or full model has a lower BIC, and thus a better goodness of fit.</p>',
            caseid: 0,
            vod_analysis: '',
            ms_analysis: '',
            sug_level: 0,
            thinking: '',
            is_true: -1,
            is_collection: false,
            caseinfo: null,
            op: [
              'The full model because it has a lower BIC.',
              'The full model because it has a lower AIC.',
              ' The reduced model because it has a lower BIC.'
            ],
            user_op_: [
              'The full model because it has a lower BIC.',
              'The full model because it has a lower AIC.',
              ' The reduced model because it has a lower BIC.'
            ],
            options: [
              'The full model because it has a lower BIC.',
              'The full model because it has a lower AIC.',
              ' The reduced model because it has a lower BIC.'
            ],
            answerAnalize: false,
            lookanalysisString: '查看解析',
            chooseAnswerNums: -1,
            isChoose: false,
            islookAnaly: false,
            one: 1
          }
        ],
        case: [
          {
            case_id: 1795,
            case_content:
              '<div><span style="font-family:"Microsoft YaHei";font-size:16px;">An analyst evaluates the sum of squared error and total sum of squares from a </span><span style="font-family:"Microsoft YaHei";font-size:16px;">multiple regression with four independent variables to be 4,320 and 9,105, </span><span style="font-family:"Microsoft YaHei";font-size:16px;">respectively. A restricted model excluding the last two variables has the sum of </span><span style="font-family:"Microsoft YaHei";font-size:16px;">squared errors of 5,105. There are 65 observations in the sample.</span></div>',
            list: [
              {
                tid: 72610,
                cid: 10606,
                qst_type: 1,
                t_type: 1,
                is_case: 1,
                id: 72353,
                title:
                  '<p><span style="font-family:&quot;Microsoft YaHei&quot;;font-size:16px;">The F-statistic for testing H0\n: b1 = b2 = b3 = b4 = 0 vs. Ha\n: at least one bj ≠ 0 is&nbsp;</span><span style="font-family:&quot;Microsoft YaHei&quot;;font-size:16px;">closest to:</span></p>',
                answer: 3,
                is_multi: '0',
                level: '1',
                op4: '',
                analysis:
                  '<p><span style="font-size:16px;font-family:&quot;Microsoft YaHei&quot;;">C&nbsp;</span></p><p><span style="font-size:16px;font-family:&quot;Microsoft YaHei&quot;;">RSS<sub>U</sub> = 9,105 - 4,320 = 4,785; k = 4; n = 65.</span></p><p><span style="font-size:16px;font-family:&quot;Microsoft YaHei&quot;;"><img src="https://img.rongyuejiaoyu.com/uploads/20231116/3b1227c690818d9fbef5167f06379784.png" alt=""/><br/></span></p>',
                caseid: 1795,
                vod_analysis: '',
                ms_analysis: '',
                is_true: -1,
                is_collection: false,
                op: ['13.54.', '13.77', '16.61.'],
                user_op_: ['13.54.', '13.77', '16.61.'],
                options: ['13.54.', '13.77', '16.61.'],
                answerAnalize: false,
                lookanalysisString: '查看解析',
                chooseAnswerNums: -1,
                isChoose: false,
                islookAnaly: false,
                one: 1
              },
              {
                tid: 72611,
                cid: 10606,
                qst_type: 1,
                t_type: 1,
                is_case: 1,
                id: 72354,
                title:
                  '<div><span style="font-family:&quot;Microsoft YaHei&quot;;font-size:16px;">The F-statistic for testing H0\r\n: b3 = b4 = 0 vs. Ha\r\n: at least one of b3 or b4 ≠ 0, is&nbsp;</span><span style="font-family:&quot;Microsoft YaHei&quot;;font-size:16px;">closest to:</span></div>',
                answer: 1,
                is_multi: '0',
                level: '1',
                op4: '',
                analysis:
                  '<p><span style="font-family:&quot;Microsoft YaHei&quot;;font-size:16px;"></span><span style="font-size:16px;">A&nbsp;</span></p><p><span style="font-size:16px;">SSE<sub>U</sub> = 4,320; SSE<sub>R</sub> = 5,105; n = 65; k = 4, q = 2.</span></p><p><span style="font-size:16px;"><img src="https://img.rongyuejiaoyu.com/uploads/20231116/9ee7885b99cd5847e7a4449b9fdd7fa1.png" alt="" /><br /></span></p><p><span style="font-size:16px;"><div>(Note: while not asked, for 5% signif icance and dof: q = 2, n - k - 1 = 60, the critical F-value = 3.15. Since F &gt; Fcritical\r\n, we reject the null hypothesis that the coeff icients for the last two variables are equal to zero.)</div><br /></span></p>',
                caseid: 1795,
                vod_analysis: '',
                ms_analysis: '',
                is_true: -1,
                is_collection: false,
                op: [' 5.45.', '12.2.', '392.'],
                user_op_: [' 5.45.', '12.2.', '392.'],
                options: [' 5.45.', '12.2.', '392.'],
                answerAnalize: false,
                lookanalysisString: '查看解析',
                chooseAnswerNums: -1,
                isChoose: false,
                islookAnaly: false,
                one: 1
              }
            ],
            count: 2
          }
        ],
        text: [],
        case_count: 2,
        model: 1,
        position: 0,
        use_time: 0,
        cate: [
          'CFA',
          'Level II“甄”题库',
          'Quantitative Methods',
          '(2024N) LM2 Evaluating Regression Model Fit and Interpreting Model Results   '
        ]
      }
    }
  },
  mounted() {
    let divElement = document.querySelector('body > div')
    let elediv = document.querySelector('div > div')
    divElement.style.height = '100%'
    elediv.style.height = '100%'
  },
  created() {
    // this.get_practice()
    this.start()
    this.getopic()
    this.model = localStorage.getItem('model')
    console.log(localStorage.getItem('model'), '参数model')
    if (this.model == 0) {
      clearInterval(this.Init)
    }
  },
  methods: {
    getopic() {
      let _that = this
      let position_num = 0
      // list
      if (_that.topicarrobj.list.length && _that.topicarrobj.list.length > 0) {
        _that.testarr = _that.topicarrobj.list.map((ele, index) => {
          position_num++
          if (ele.position) {
            ele.position = ele.position
          } else {
            ele.position = position_num
          }
          _that.topicarr.push(ele)
          return ele
        })
        console.log(position_num, 'data.list', _that.topicarr)
      }

      // case
      if (_that.topicarrobj.case.length && _that.topicarrobj.case.length > 0) {
        _that.casearr = _that.topicarrobj.case.map((ele, index) => {
          _that.case_info = ele.case_content
          this.test_case = ele.list
          ele.list.map((it, index) => {
            position_num++
            if (it.position) {
              it.position = it.position
            } else {
              it.position = position_num
            }
            _that.topicarr.push(it)
            return it
          })
          return ele
        })
        console.log(_that.casearr, 'data.case', _that.topicarr)
      }
      // text
      if (_that.topicarrobj.text.length && _that.topicarrobj.text.length > 0) {
        _that.textarr = _that.topicarrobj.text.map((ele, index) => {
          position_num++
          if (ele.position) {
            ele.position = ele.position
          } else {
            ele.position = position_num
          }
          _that.topicarr.push(ele)
          return ele
        })
        console.log(_that.textarr, 'data.text', _that.topicarr)
      }
    },

    async get_practice() {
      const params = {
        token: this.$store.state.token,
        cid: 10606,
        type: 1
      }
      const { data: data } = await get_topic(params)
      if (data.code == 1) {
        console.log(data.data, '333333333333')
      } else {
        this.$message.error(data.msg)
      }
    },
    select_topic(it, index) {
      this.set_val = index
      console.log(213)
    },
    doubt() {
      this.$router.push({
        path: '/newzhike/tutorial',
        query: {}
      })
    },
    editor_change(e) {
      // if (e.user_answer.length > 0) {
      //   e.is_true = 2
      // }
      console.log(3333, this.user_answer)
    },
    start() {
      this.Init = setInterval(this.timers, 1000)
    },
    timers(num) {
      if (num) {
        this.seconds = this.testTime
      }
      this.seconds++
      var second = this.seconds % 60
      var minute = parseInt(this.seconds / 60) % 60
      var hour = parseInt(this.seconds / 3600)
      this.timing = `${hour < 10 ? '0' + hour : hour}:
      ${minute < 10 ? '0' + minute : minute}:
      ${second < 10 ? '0' + second : second}`

      // console.log('计时', this.timing)
    },
    tabs(it, i) {
      if (it.have_case) {
        this.have_case = !this.have_case
        console.log(i, '77777')
      } else {
        this.p_id = it.cid
        this.change_class = false
        this.zoom_show = false
        console.log(i, '索引', it.cid)
      }
    },
    inner_tab(it, index) {
      this.p_id = it.cid
      console.log(it.cid, 222222222, index)
      this.change_class = true
      this.zoom_show = true
    },
    zoom_out() {
      this.zoom = !this.zoom
      this.change_class = !this.change_class
      this.zoom_show = true
    },

    // back按钮
    pageback() {},
    // next按钮
    nextpage() {
      this.p_id++
      console.log(this.p_id, '55555555')

      // if (this.p_id == this.test_case.length - 1) return
      // if (this.test_case.length > 0 && this.test_case[this.p_id - 1].is_case) {
      //   this.change_class = true
      //   this.zoom_show = true
      //   if (this.zoom) {
      //     this.change_class = false
      //     return -1
      //   }
      //   this.zoom = false
      // } else {
      //   // 改
      //   this.change_class = false
      //   this.zoom_show = false
      // }
    },

    // finishTest 完成
    submitTest() {
      this.$router.push({ name: 'CFAReport' })
      console.log(this.seconds)
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/mockExam.scss';

.mockExam {
  height: 100%;
  overflow-y: auto;
}

.btns_cont {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  // justify-content: space-evenly;

  .el-button {
    position: relative;
    width: 110px;
    height: 26px;
    background-color: $color-green; // 题目按钮颜色
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    border: 0;
    outline: none;
    margin-bottom: 5px;
    margin-left: 0px;
  }

  .el-button::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -10px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 12px solid transparent;
  }

  .el-button.active::after {
    border-left-color: #8cc63f;
  }

  .el-button.answered {
    background-color: #4d4c4d;
  }

  .el-button.active.answered::after {
    border-left-color: #4d4c4d;
  }

  .el-button.answered::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 12px solid #ffffff;
    border-right: 12px solid transparent;
    background: #bac4cb;
    display: block;
    width: 0;
    height: 0;
  }
}

/* footer 底部区域 */
.footer {
  width: 100%;
  height: 60px;
  background-color: #3d505a;
  border-top: 4px solid $color-green;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;

  .left {
    button {
      border: 0;
      outline: none;
      padding: 0;
      background: transparent;

      ::v-deep span {
        width: 43px;
        height: 43px;
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .el-button--success:hover {
    opacity: 0.6;
  }

  .el-button {
    background-color: $color-green;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;

    ::v-deep i {
      font-size: 18px;
      font-weight: bold;
      vertical-align: middle;
    }
  }
}

/* finishTest 弹框*/
.common_dialog.finishTest .inner {
  height: 290px;
  width: 500px;
  padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;

  .main_text {
    margin: 20px auto;
    text-align: center;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    img {
      width: 50px;
      height: 50px;
      margin-bottom: 20px;
    }
  }
  .btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 220px;
    margin: 40px auto 0;
    button {
      width: 100px;
      height: 40px;
      background: $color-green; // 完成按钮finish
      outline: none;
      border: 0;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img {
        width: 25px;
        height: 25px;
        margin-right: 5px;
      }
      p {
        font-size: 16px;
        color: #ffffff;
      }
    }
  }
}

.centertitle {
  width: 100%;
  box-sizing: border-box;
  padding-left: 12px;
  height: 26px;
  line-height: 26px;
  background-color: $color-green; // tap标题

  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
  }
}

.inner_btnbox .test_btn.have {
  position: relative;
}
.inner_btnbox.not_show_child .test_btn.have::before {
  transform: rotate(180deg);
  transition: all ease 0.5s;
}
.inner_btnbox .test_btn.have::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url('@/assets/images/flag.png') no-repeat center;
  background-size: contain;
  position: absolute;
  top: 6px;
  right: 15px;
  transform: rotate(0);
  transition: all ease 0.5s;
}
</style>
